<template>
  <header class="header">
    <h1>todos</h1>
    <input
      :disabled="list.length === 0"
      v-model="ol"
      id="toggle-all"
      class="toggle-all"
      type="checkbox"
    />
    <label for="toggle-all"></label>
    <input
      @keydown.enter="add"
      v-model.trim="tackname"
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
    />
  </header>
</template>

<script>
// 导入辅助函数
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      tackname: '',
      ist: false
    }
  },
  computed: {
    // 辅助函数可以直接拿list
    ...mapState(['list']),
    ol: {
      set (val) {
        this.quanxuan({ val })
      },
      get () {
        if (this.list.length === 0) {
          return false
        } else {
          return this.list.every((item) => item.isDone)
        }
      }
    }
  },
  methods: {
    // 辅助函数可以直接this.方法名
    ...mapMutations(['quanxuan', 'ac']),
    //   添加
    add () {
      if (this.tackname.length === 0) {
        return alert('不能输入空')
      }
      // 调用mutation里面定义的添加方法并且传入添加的数据
      this.ac({
        id:
          this.list.length === 0 ? 100 : this.list[this.list.length - 1].id + 1,
        name: this.tackname,
        isDone: false
      })
      // 添加完成清空输入框
      this.tackname = ''
    }
  }
}
</script>
